<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <div id="juxing"></div>
    <script>
        // 方法一
        // let width=300
        // let height=300
        // d3.select("#juxing").attr("width",width).attr("height",height).append("svg").append("rect").attr("x",10).attr("y",10).attr("width",200).attr("height",100).attr("fill","red")

        // 方法二
        // var width = 300;
        //  var height = 300;
        //  //Create SVG element   先创建一个svg
        //  var svg = d3.select("#juxing")
        //     .append("svg")
        //     .attr("width", width)
        //     .attr("height", height);
        //  //Create and append rectangle element
        // //  在svg上在追加一个rect矩形
        //  svg.append("rect")
        //     .attr("x", 20)
        //     .attr("y", 20)
        //     .attr("width", 200)
        //     .attr("height", 100)
        //     .attr("fill", "green");


        // 练习方法二
        let width=600
        let height=600
        let svg =d3.select("#juxing").append("svg").attr("width",width).attr("height",height)
        // 在svg中追加
        svg.append("rect").attr("x",10).attr("y",10).attr("width",300).attr("height",300).attr("fill","pink")
    </script>
    
</body>
</html>